<template>
  <div class="time-analysis">
    <div class="time-filter">
      <el-date-picker
        v-model="timeRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
        :shortcuts="dateShortcuts"
        @change="handleTimeRangeChange"
      />
      <el-button type="primary" @click="filterDataByTimeRange" style="margin-left: 10px;">
        筛选
      </el-button>
      <el-button @click="resetTimeRange" style="margin-left: 10px;">
        重置
      </el-button>
    </div>
    <div ref="chartRef" class="chart-container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'

// 定义props
const props = defineProps({
  logList: {
    type: Array,
    default: () => []
  }
})

// 时间范围相关变量
const timeRange = ref([])
const filteredLogList = ref([])

// 日期快捷选项
const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [formatDate(start), formatDate(end)]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [formatDate(start), formatDate(end)]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [formatDate(start), formatDate(end)]
    },
  },
]

// 格式化日期为YYYY-MM-DD
const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 图表实例
const chartRef = ref(null)
let chartInstance = null

// 将分钟数转换为"X小时Y分钟"格式
const formatMinutesToHours = (minutes) => {
  if (!minutes && minutes !== 0) return '0分钟'
  
  const hours = Math.floor(minutes / 60)
  const mins = minutes % 60
  
  if (hours > 0 && mins > 0) {
    return `${hours}小时${mins}分钟`
  } else if (hours > 0) {
    return `${hours}小时`
  } else {
    return `${mins}分钟`
  }
}

// 初始化图表
const initChart = () => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value)
    updateChart()
  }
}

// 更新图表
const updateChart = () => {
  if (!chartInstance) return
  
  updateLineChart()
}

// 处理时间范围变化
const handleTimeRangeChange = () => {
  // 时间范围变化时的处理逻辑
}

// 根据时间范围筛选数据
const filterDataByTimeRange = () => {
  if (!timeRange.value || timeRange.value.length !== 2) {
    // 如果没有选择时间范围，使用全部数据
    filteredLogList.value = [...props.logList]
  } else {
    const [startDate, endDate] = timeRange.value
    filteredLogList.value = props.logList.filter(item => {
      if (!item.createTime) return false
      const itemDate = item.createTime.split(' ')[0]
      return itemDate >= startDate && itemDate <= endDate
    })
  }
  
  // 更新图表
  nextTick(() => {
    updateChart()
  })
}

// 重置时间范围
const resetTimeRange = () => {
  timeRange.value = []
  filteredLogList.value = [...props.logList]
  nextTick(() => {
    updateChart()
  })
}

// 更新折线图
const updateLineChart = () => {
  // 使用筛选后的数据，如果没有筛选数据则使用原始数据
  const dataList = filteredLogList.value.length > 0 ? filteredLogList.value : props.logList
  
  // 处理数据，按日期分组计算学习时长
  const dateTimeData = {}
  
  dataList.forEach(item => {
    // 只处理学习时长类型的数据
    if (item.logType == 1) {
      // 提取日期部分（去掉时间）
      const date = item.createTime ? item.createTime.split(' ')[0] : '未知日期'
      if (!dateTimeData[date]) {
        dateTimeData[date] = {
          date: date,
          totalTime: 0
        }
      }
      // 累加学习时长
      dateTimeData[date].totalTime += parseFloat(item.score) || 0
    }
  })
  
  // 转换为图表需要的数据格式并按日期排序
  const sortedData = Object.values(dateTimeData).sort((a, b) => {
    return new Date(a.date) - new Date(b.date)
  })
  
  const xAxisData = sortedData.map(item => item.date)
  const seriesData = sortedData.map(item => item.totalTime)
  
  // 根据是否筛选了时间范围来调整标题
  let titleText = '学生学习时长分析图'
  if (timeRange.value && timeRange.value.length === 2) {
    titleText += ` (${timeRange.value[0]} 至 ${timeRange.value[1]})`
  }
  
  const option = {
    title: {
      text: titleText
    },
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        let result = params[0].name + '<br/>'
        params.forEach(param => {
          const value = param.value
          const formattedValue = formatMinutesToHours(value)
          result += `${param.seriesName}：${formattedValue}<br/>`
        })
        return result
      }
    },
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value',
      name: '学习时长(分钟)',
      axisLabel: {
        formatter: function(value) {
          return formatMinutesToHours(value)
        }
      }
    },
    series: [{
      name: '学习时长',
      type: 'line',
      data: seriesData,
      itemStyle: {
        color: '#67C23A'
      },
      lineStyle: {
        width: 3
      }
    }]
  }
  
  chartInstance.setOption(option, true)
}

// 调整图表大小
const resizeChart = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}

// 暴露方法给父组件
defineExpose({
  resizeChart
})

// 组件挂载时初始化
onMounted(() => {
  initChart()
  window.addEventListener('resize', resizeChart)
})

// 组件卸载时清理
// onUnmounted(() => {
//   window.removeEventListener('resize', resizeChart)
//   if (chartInstance) {
//     chartInstance.dispose()
//   }
// })

// 监听数据变化，重置筛选条件并更新图表
watch(
  () => props.logList,
  () => {
    // 重置筛选条件
    timeRange.value = []
    filteredLogList.value = [...props.logList]
    nextTick(() => {
      updateChart()
    })
  }
)
</script>

<style scoped>
.time-analysis {
  width: 100%;
  height: 100%;
}

.time-filter {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.chart-container {
  width: 100%;
  height: 500px;
}
</style>